<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item>
        <el-button
          icon="el-icon-plus"
          type="primary"
          @click="showAdd"
        >{{ $t('insert') }}
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      ref="multipleTable"
      :data="docList"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="title" :label="$t('title')" />
      <el-table-column :label="$t('keyword')">
        <template slot-scope="scope">
          <el-tag
            v-for="keyword in scope.row.keywordList"
            :key="keyword"
            size="medium"
          >
            {{ keyword }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column :label="$t('language')">
        <template slot-scope="scope">
          <el-select v-model="scope.row.languageList" multiple disabled>
            <el-option
              v-for="item in languageList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column width="150" :label="$t('function')">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="edit(scope.row)"
          >{{ $t('edit') }}
          </el-button>
          <el-button
            style="color: #f56c6c"
            type="text"
            icon="el-icon-delete"
            @click="del(scope.row)"
          >{{ $t('delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button
      v-show="mCheck"
      icon="el-icon-delete"
      type="danger"
      round
      style="position: fixed;bottom: 20px;right: 15px;z-index: 1000;"
      circle
      @click="mDel"
    />
    <div style="margin: 15px 0;text-align: right">
      <el-pagination
        background
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="totalNotice"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { cancelNotice, listLanguage, successNotice } from '@/util/common'
import { deleteDocCustom, deleteDocCustomList, pageGetDocCustom } from '@/api/iot/iotDocCustomApi'
import { getCompanyId, getPageSize, setPageSize } from '@/util/storage'

export default {
  name: 'DocCustom',
  data() {
    return {
      companyId: getCompanyId(),
      docList: [],
      currentPage: 1,
      totalNotice: 0,
      pageSize: getPageSize(),
      mCheck: false,
      mList: [],
      languageList: []
    }
  },
  mounted() {
    this.languageList = listLanguage(this)
    this.pageGetDocCustom()
  },
  methods: {
    edit(item) {
      this.$router.push({
        path: '/doc/edit/' + item.id,
        query: {
          'type': 'edit',
          'docType': 'custom',
          'id': item.id
        }
      })
    },
    showAdd() {
      this.$router.push({
        path: '/doc/edit/' + 0,
        query: {
          'type': 'add',
          'docType': 'custom'
        }
      })
    },
    handleSelectionChange(val) {
      const mList = []
      val.forEach(function(row) {
        mList.push(row.id)
      })
      this.mList = mList
      if (mList.length > 0) {
        this.mCheck = true
      } else {
        this.mCheck = false
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      setPageSize(this.pageSize)
      this.pageGetDocCustom()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.pageGetDocCustom()
    },
    mDel() {
      const that = this
      this.$confirm(this.$t('deletePrompt'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteDocCustomList({
            idList: that.mList
          }).then(res => {
            const { code } = res
            if (code === '200') {
              that.pageGetDocCustom()
            }
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    },
    del(item) {
      const that = this
      this.$confirm(this.$t('deletePrompt'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteDocCustom({
            id: item.id
          }).then(res => {
            const { code } = res
            if (code === '200') {
              that.pageGetDocCustom()
              successNotice(that)
            }
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    },
    pageGetDocCustom() {
      pageGetDocCustom({
        companyId: this.companyId,
        pageSize: this.pageSize,
        currentPage: this.currentPage
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.totalNotice = data.total
          this.docList = data.data
        }
      })
    }
  }
}
</script>
